<template>
    <div>
        <div class="header">
            <el-input v-model="parmas.idorname" @clear="clearable" @keyup.enter.native="Search" @submit.native.prevent
                placeholder="输入要查询的管理员名称" clearable />
            <el-button type="primary" @click="Search">查询</el-button>
            <el-button type="success" @click="Add">添加</el-button>
            <el-button type="danger" @click="Dels">批量删除</el-button>
        </div>
        <Table :tableData="tableData" :tableColumns="tableColumns" :tableConfig="tableConfig" @sizeChange="sizeChange"
            @pageChange="pageChange" @SwitchEmit="Switchs" @id="del" @ids="dels" @IDdetails="IDdetails"
            @update="update"></Table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, toRaw,onActivated } from 'vue'
import Table from '../../components/Table.vue'
import http from '../../api/conser'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '../../router'
interface IState {
    tableData: Array<any>
    parmas: any
    // ids: Array<any>
    tableColumns: any
    tableConfig: any
}
const state = reactive<IState>({
    tableData: [],
    parmas: { page: 1, pageSize: 5, idorname: '' },
    tableColumns: [
        { prop: 'admin_name', label: '管理员名称' },
        { prop: 'name', label: '部门' },
        { prop: 'real_name', label: '真实姓名' },
        { prop: 'mobile', label: '手机号' },
        { prop: 'email', label: '邮箱' },
        { prop: 'roles', label: '角色' },
        { prop: 'remarks', label: '备注' },
        { prop: 'is_use', label: '是否启用' },
    ],
    tableConfig: {
        selection: true,
        addButton: true,
        editButton: true,
        delButton: true,
        otherButton: true,
        AuditButton: false,
        isPagination: false,
        total: 0,
        // details:String
    },

})
let ids: any = ref([])
const { tableData, parmas, tableColumns, tableConfig } = toRefs(state)
// 分页
const sizeChange = (val: number) => {
    state.parmas.pageSize = val
    getList()
}
const pageChange = (val: number) => {
    state.parmas.page = val
    getList()
}
// 跳转到添加
const Add = () => {
    router.push('/conadd')
}
// 列表
const getList = async () => {
    const res: any = await http.getAdmin(state.parmas)
    if (res.code === 10000) {
        state.tableData = res.data.list
        state.tableConfig.total = res.data.total
    }

}
// 更改状态
const Switchs = async (data: any) => {
    // console.log(data);
    const date = {
        admin_id: data.admin_id,
        is_use: data.is_use
    }
    const res: any = await http.getSwitchs(date)
    if (res.code === 10000) {
        ElMessage({
            message: '更新状态成功',
            type: 'success',
        })
    }

}
const update = (val: any) => {
    router.push({ path: "/conupdata", query: { data: val.admin_id } })
}
//单删
const del = (data: any) => {
    ElMessageBox.confirm(
        '此操作将永久删除该数据, 是否继续?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消 ',
            type: 'warning',
        }
    )
        .then(async () => {
            const res: any = await http.getadmindel({ admin_id: data.admin_id })
            if (res.code === 10000) {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
            }
            getList()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })

}
// 详情
const IDdetails = async (data: any) => {
    const res: any = await http.getadmindetails({ admin_id: data.admin_id })
    if (res.code === 10000) {
        router.push({ path: '/condetails', query: { data: JSON.stringify(res.data) } })
    }

}

// 批量删除传的id
const dels = (val:any) => {
    const res: any = JSON.parse(val).map((item: { admin_id: any; }) => item.admin_id)
    ids.value = res.join()
}
// 批量删除
const Dels = () => {
    ElMessageBox.confirm(
        '此操作将永久删除该数据, 是否继续?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res: any = await http.getadmindel({ admin_id:ids.value })
            if (res.code === 10000) {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
            }
            getList()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
// 查询
const Search = () => {
    getList()
}
// input清空以后返回原来的值
const clearable = () => {
    getList()
}
onActivated(()=>{
    getList()
})
    getList()
</script>

<style scoped>
.header {
    margin-bottom: 20px;
}

.header .el-input {
    width: 200px;
    height: 28px;
    margin-right: 10px;
    font-size: 10px;

}

.el-button {
    height: 28px;
    font-size: 12px;
}
</style>